<template>
  <a-select v-model:value="columnValue" mode="multiple" placeholder="请选择表格子列" key="maxValue" @change="onColunmChange">
    <a-select-option v-for="item in tableFieldList" :value="item.columnName">
      {{ item.columnName }}
    </a-select-option>
  </a-select>
</template>

<script setup lang="ts">
import { ref, defineComponent, computed, reactive, onMounted } from 'vue'
import { useDataStore } from '@/stores'
import { generateUUID } from '@/utils/uuid'
const store = useDataStore()

const emit = defineEmits(['onChange'])

const options = computed(() => store.currentCheckedComponent.options)
let curColumn = store.curColumn
let existOperateFlag = false
console.log('--curColumn----')
const tableFieldList = computed(() => {
  if (options.value.contentDataSource == 'radio-button-interface') {
    return initTableFieldList(options.value.interfaceDataConfig.uuid, options.value.interfaceDataConfig.key)
  }
  return []
})
const columnValue = computed(() => {
  let tempValue = [] as any

  curColumn.children &&
    curColumn.children.forEach((cItem: any) => {
      tempValue.push(cItem.dataIndex)
    })
  return tempValue
})
function initTableFieldList(operateApiId: any, key: any) {
  let interfaceData = store.interfaceDataById(operateApiId)
  let tableFieldList = []
  if (interfaceData) {

      let respList = interfaceData.data.responseData[key]
      if (respList&&respList.length > 0) {
        let temp = respList[0]
        for (let k in temp) {
          tableFieldList.push({
            columnName: k
          })
        }
      }
  }
  return tableFieldList
}

let state = reactive({
  pageNum: 5
})
// let columnValue= [] as any
function onColunmChange(values: any) {
  if (!curColumn.children) {
    curColumn.children = []
    // options.value.specialColumnsConfigs = []
  }
  curColumn.children.forEach((cItem: any, index: any) => {
    let exist = false
    values.forEach((vItem: any) => {
      if (vItem == cItem.value) {
        exist = true
      }
    })
    if (cItem.dataIndex == '操作') {
      exist = true
    }
    if (!exist) {
      curColumn.children.splice(index, 1)
      //   options.value.specialColumnsConfigs.splice(index, 1)
    }
  })

  values.forEach((vItem: any) => {
    let exist = false
    existOperateFlag = false
    curColumn.children.forEach((cItem: any) => {
      if (vItem == cItem.value) {
        exist = true
      }
      if (cItem.dataIndex == '操作') {
        existOperateFlag = true
      }
    })
    if (!exist) {
      let columnItem = {
        width: 200,
        value: vItem,
        title:vItem,
        enValue: '',
        colValue: vItem,
        dataIndex: vItem,
        key: '',
        align: 'center',
        colIndex: curColumn.colIndex,// 注意这里是父列的colIndex
        specialColumnsConfigs: {},
        interfaceDataConfig: {},
        version:"2.0.0",
        popoverVisible: false //用于输入多语言的弹框
      }
      // 2023-08-24 这块处理 specialColumn 的逻辑 后面想想能不能优化
      let specialColumnItem = {
        colValue: vItem,
        valueType: 'value',
        dataIndex: vItem,
        specialUUID: 'table-column-' + generateUUID(),
        statusConfigList: [],
        tableBindDataRowKeyList: [],
        tableDataRowKeyList: []
      }
      if (existOperateFlag) {
        let index1 = curColumn.children.length - 1
        curColumn.children.splice(index1, 0, columnItem)
        // options.value.specialColumnsConfigs.splice(index1, 0, [specialColumnItem])
      } else {
        curColumn.children.push(columnItem)
        // options.value.specialColumnsConfigs.push([specialColumnItem])
      }
    }
  })

//   console.log('--onColunmChange----', values)
//   curColumn.children = []
//   values.forEach((vItem: any) => {
//     curColumn.children.push({
//       title: vItem,
//       dataIndex: vItem
//     })
//   })
}

onMounted(() => {
  /// columnValue 回显
})
</script>

<style lang="less" scoped>
:deep(.ant-form-item-control-input-content) {
  text-align: left;
}

.table-column-item {
  padding: 5px;
  .iconfont {
    &.active {
      color: #197aff;
    }
  }
}
.event-div {
  display: flex;
  justify-content: space-between;
}
.event-div-row {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  margin: 20px auto;
  align-items: center;
  color: #666;
  cursor: pointer;
  border: 1px solid #e5e6e8;
  border-radius: 6px;
  padding: 0 8px;
  height: 36px;
  &:hover {
    color: #409eff;
    border: 1px dashed #409eff;
  }
}
.event-div-col {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  width: 44%;
  align-items: center;
  color: #666;
  cursor: pointer;
  border: 1px solid #e5e6e8;
  border-radius: 6px;
  padding: 0 8px;
  height: 36px;
  &:hover {
    color: #409eff;
    border: 1px dashed #409eff;
  }
}
</style>
